<template>
  <div class="monitor">
    <h6 class="title">实时监测</h6>
    <div class="monitor_Content">
      <div class="monitor_title">
        <p>车辆类型</p>
        <p>车牌</p>
        <p>车道</p>
        <p>总重</p>
        <p>轴数</p>
        <p>速度</p>
        <p>过车时间</p>
      </div>
      <div class="loading loadingClassY" v-show="loadingFlag">
        <van-loading class="wap" type="spinner" vertical>数据加载中...</van-loading></van-loading>
      </div>
      <p class="noneData" v-show="noneDataFlag">暂无数据</p>
      <vueSeamless :data="list" :class-option="option" class="wap">
        <div v-for="item in list">
          <p>{{ item.auto_type_name }}</p>
          <p>{{ item.Plate }}</p>
          <p>{{ item.Lane }}</p>
          <p>{{ item.AutoWeight | weightFormat }}</p>
          <p>{{ item.AxisNum }}</p>
          <p>{{ item.AutoSpeed }}</p>
          <p>{{ item.PassingDate | formatDate }}</p>
        </div>
      </vueSeamless>
    </div>
  </div>
</template>
<script>
import requistApi from '@/api'
import commonFn from '@/utils/commonFn'
import load from '../../api/load'
import vueSeamless from 'vue-seamless-scroll'
export default {
  components: { vueSeamless },
  data() {
    return {
      loadingFlag: true,
      noneDataFlag: false,
     
      option: {
        limitMoveNum: 9,
        openTouch: false,
        waitTime: 1,
        direction: 1,
        // singleHeight: 30,
        step: 0.3, // 数值越大速度滚动越快
      },
      // 实时荷载数据
      list: [],
    }
  },

  filters: {
    // 时间戳转换时间标准格式
    formatDate: function(value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '.' + MM + '.' + d + ' ' + h + ':' + m
    },

    //转换重量单位吨
    weightFormat: function(val) {
      if (val.toString().length >= 3) {
        const num = val / 1000
        const realVal = parseFloat(num).toFixed(2)
        return realVal
      } else if (val.toString().length >= 4) {
        const num = val / 10000
        const realVal = parseFloat(num).toFixed(2)
        return realVal
      } else if (val.toString().length >= 5) {
        const num = val / 100000
        const realVal = parseFloat(num).toFixed(2)
        return realVal
      }
    },
  },

  methods: {
    // 获取实时数据数据
    getRealMonitorData(id = this.bridgeId) {
      requistApi.load.getRealMonitorData(id, this.getParams()).then((res) => {
        if (res.data.data !== undefined && JSON.stringify(res.data.data) !== '{}') {
          this.list = res.data.data
          this.loadingFlag = false
          if(res.data.data.length==0){  
           this.noneDataFlag = true
        }
        } 
      })
    },
    //
    getParams() {
      let token = commonFn.getQueryVariable('token') || ''
      let appkey = commonFn.getQueryVariable('app-key') || ''
      return { token, appkey }
    },
    // 定时请求数据20s
    timer() {
      return setInterval(() => {
        this.getRealMonitorData()
      }, 6000)
    },
  },
  mounted() {
    // this.bridgeId = commonFn.getQueryVariable('bridgeId') || '758323582542544896'
    this.bridgeId = commonFn.getQueryVariable('bridgeId') || '758341733233721344'
    this.getRealMonitorData() // 获取实时数据数据
    this.timer()
  },
  destroyed() {
    clearInterval(this.timer) //页面关闭清除定时器
  },
}
</script>
<style lang="less" scoped>
.monitor {
  margin-top: 10px;
  .title {
    margin-top: 11.5px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-bottom: 10px;
  }
  .monitor_Content {
    position: relative;
    .loading {
      position: absolute;
      left: 50%;
      top: 70%;
      transform: translate(-50%, -50%);
    }
    .noneData {
      
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 13px;
      font-weight: 600;
      color: #327bdc;
    }
    margin-top: 11.5px;
    .wap {
      height: 150px;
      overflow: hidden;
      div {
        display: flex;
        p {
          -webkit-transform: scale(0.95);
          transform: scale(0.95);
          text-align: center;
          margin-top: 9px;
        }
        p:nth-child(1) {
          width: 18%;
        }
        p:nth-child(2) {
          width: 18%;
        }
        p:nth-child(3) {
          width: 11.5%;
        }
        p:nth-child(4) {
          width: 9.5%;
        }
        p:nth-child(5) {
          width: 9.5%;
        }
        p:nth-child(6) {
          width: 9.5%;
        }
        p:nth-child(7) {
          margin-right: 5px;
          width: 28%;
        }
      }
    }
    font-size: 9.5px !important;
    width: 354.5px;
    overflow: hidden;
    height: 187px;
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(173, 173, 173, 0.5);
    border-radius: 8px;
  }
  .monitor_title {
    display: flex;
    height: 25px;
    line-height: 25px;
    justify-items: center;
    align-content: center;
    align-items: center;
    margin-top: 5px;
    p {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
      text-align: center;
    }
    p:nth-child(1) {
      width: 17%;
    }
    p:nth-child(2) {
      width: 15%;
    }
    p:nth-child(3) {
      width: 12%;
      margin-left: 2px;
    }
    p:nth-child(4) {
      width: 11%;
    }
    p:nth-child(5) {
    }
    p:nth-child(6) {
      margin-left: 3%;
    }
    p:nth-child(7) {
      width: 28%;
    }
  }
}
</style>
